<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>同咨科技-商户后台</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../static/css/weadmin.css">
    <link href="../../lib/layui/css/layui.css" rel="stylesheet">

    <script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script type="module" src="../components/use-body.js"></script>



    <link href="../../static/css/information.css" rel="stylesheet">
    <link href="../../static/css/uselay.css" rel="stylesheet">
</head>

<body>
    <use-body>
        <div class="page-body layout-left-menu">

            <!-- 左边菜单 -->
            <div class="side">
                <div class="back-page">
                   <i class="iconfont use-arrow"></i> 返回资料大厅
                </div>

                <div class="layui-panel">
                    <ul class="layui-menu" id="demo-menu">
                        <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
                            <div class="layui-menu-body-title">个人资料</div>
                            <ul>
                                <li class="layui-menu-item-checked">
                                    <div class="layui-menu-body-title">收藏的</div>
                                </li>
                            </ul>
                        </li>
                        <li class="layui-menu-item-divider"></li>
                        <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
                            <div class="layui-menu-body-title">项目小组</div>
                            <ul>
                                <li>
                                    <div class="layui-menu-body-title">项目小组A</div>
                                </li>
                                <li>
                                    <div class="layui-menu-body-title">项目小组B</div>
                                </li>
                                <li>
                                    <div class="layui-menu-body-title">项目小组C</div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 主体 -->
            <div class="page-border">

                <div class="layui-tab-item layui-show">

                    <!-- 工具栏 -->
                    <form class="layui-form layui-row">
                        <div class="table-toolbar" style="padding-top: 0;">
                            <div class="left" style="flex: 1;">
                                <div class="layui-input-wrap">
                                    <div class="layui-input-prefix">
                                        <i class="iconfont  use-search"></i>
                                    </div>
                                    <input type="text" name="A" value=""
                                        placeholder="Search..." class="layui-input" lay-affix="clear">
                                </div>
                                <button class="layui-btn layui-btn-primary layui-btn-radius" lay-submit
                                    lay-filter="demo-table-search">
                                    <i class="iconfont  use-search"></i>搜索
                                </button>

                            </div>
                        </div>
                    </form>
                    <div class="divider"></div>
                    <!--  表格 -->
                    <table class="layui-hide" id="ID-table-demo-data"></table>

                </div>
            </div>
        </div>
    </use-body>
</body>
<!-- 工具栏模板 -->
<script type="text/html" id="operate-btn">
    <div class="operate-btn">
      <i class="iconfont use-down layui-btn btn-text"></i>
      <i class="iconfont use-preview layui-btn btn-text"></i>
    </div>
  </script>
<script>
    layui.use('table', function () {
        var $ = layui.$;
        var table = layui.table;
        var util = layui.util;
        var form = layui.form;
        var upload = layui.upload;
        var laydate = layui.laydate;
        // 已知数据渲染
        var inst = table.render({
            elem: '#ID-table-demo-data',
            cols: [[ //标题栏
                {sort: true, field: 'id', title: '资料名称', align: 'center',
                    templet: '<div style="display:flex;align-items: center;"><i class="iconfont use-docx" style="color:#1296DB;font-size:28px"/>资料名称.docx</div>'
                },
                {sort: true, field: 'username', title: '资料类型', align: 'center' },
                {sort: true, field: 'username', title: '资料格式', align: 'center' },
                {sort: true, field: 'username', title: '收藏时间', align: 'center' },
                { field: 'username', title: '操作', align: 'center',toolbar: '#operate-btn' }
            ]],
            data: [{ // 赋值已知数据
                "id": "10001",
                "username": "张三1",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "116"
            }, {
                "id": "10002",
                "username": "张三2",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "12",
                "LAY_CHECKED": true
            }, {
                "id": "10003",
                "username": "张三3",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "65"
            }, {
                "id": "10004",
                "username": "张三4",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "777"
            }, {
                "id": "10005",
                "username": "张三5",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "86"
            }, {
                "id": "10006",
                "username": "张三6",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "12"
            }, {
                "id": "10007",
                "username": "张三7",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "16"
            }, {
                "id": "10008",
                "username": "张三8",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "106"
            }],
            skin: 'nob', // 表格风格
            //even: true,
            maxHeight: 'full-350',
            page: { // 支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['count', 'prev', 'page', 'next', 'limit',], //自定义分页布局
            },
            
            limit: 10 // 每页默认显示的数量
        });

    });
</script>

</html>